<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            display: flex;
            width: 500px;
            height: 500px;
            border: 1px solid   red;
            flex-wrap: wrap;
            /*
            align-content:设置多行的对齐方式，因为在垂直方向是存在多行的项目，所以对比align-items多了
            两个属性值，可以设置行与行之间的间距space-between  space-around
            如果使用align-items设置多行显示的居中效果跟我们预期的居中效果不一样，所以不能用这个设置

              单行的垂直居中：align-items
              多行的垂直居中：align-content

            */
            /*align-content: flex-end;*/
            /*align-content: flex-start;*/
            /*align-content: center;*/
            /*align-content: space-between;*/
              /*align-content: space-around;*/
            align-content: stretch;
        }
        span{
            display: inline-block;
            width: 100px;
            background-color: aqua;
        }

    </style>
</head>
<body>
  <!--
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
  -->
    <div>
        <span>第一个项目</span>
        <span>第二个项目</span>
        <span>第三个项目</span>
        <span>第四个项目</span>
        <span>第五个项目</span>
        <span>第六个项目</span>
        <span>第七个项目</span>
        <span>第八个项目</span>
        <span>第九个项目</span>
        <span>第六个项目</span>
        <span>第七个项目</span>
        <span>第八个项目</span>
        <span>第九个项目</span>
    </div>





</body>
</html>